<template>
  <div class="search">
    <Card>
      <Form
        ref="searchForm"
        :model="queryParam"
        inline
        :label-width="70"
        class="search-form"
      >
        <Form-item label="会员昵称" prop="memberNickName">
          <Input
            type="text"
            v-model="queryParam.memberNickName"
            placeholder="会员昵称"
            clearable
            style="width: 200px"
          />
        </Form-item>
        <Form-item label="手机号" prop="memberMobile">
          <Input
            type="text"
            v-model="queryParam.memberMobile"
            placeholder="手机号"
            clearable
            style="width: 200px"
          />
        </Form-item>
        <Form-item label="业务类型" prop="serviceType">
          <DictSelect
            v-model="queryParam.serviceType"
            placeholder="业务类型"
            clearable
            style="width: 200px"
            dictCode="depositServiceType"
          />
        </Form-item>

        <Button
          @click="reloadData"
          type="primary"
          icon="ios-search"
          class="search-btn"
          >搜索</Button
        >
        <Button
          @click="reloadData(true)"
          type="primary"
          icon="ios-refresh"
          class="search-btn"
          >重置</Button
        >
      </Form>
      
      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="dataSource"
        ref="table"
        class="mt_10"
      >
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page v-bind="pageOption" v-on="pageListener"></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import { SimpleTableMixins } from "@/mixins/SimpleTableMixins.js";
import { getUserWallet } from "@/api/billStatic.js";
import { getDictByKey } from "@/libs/dictStorage";
import vueQr from "vue-qr";

export default {
  mixins: [SimpleTableMixins],
  components: {
    "vue-qr": vueQr,
  },
  data() {
    let that = this;
    return {
      action: {
        listAction: getUserWallet,
      },
      columns: [
        // 表头
        {
          title: "会员昵称",
          key: "memberNickName",
          minWidth: 100,
        },
        {
          title: "会员名称",
          key: "memberName",
          minWidth: 100,
        },
        {
          title: "会员手机号",
          key: "memberMobile",
          minWidth: 100,
        },
        {
          title: "变动数额",
          key: "money",
          width: 150,
          render: (h, params) => {
            if (params.row.money > 0) {
              return h("priceColorScheme", {
                props: { value: params.row.money, color: "green", unit: "" },
              });
            } else if (params.row.money < 0) {
              return h("priceColorScheme", {
                props: {
                  value: params.row.money,
                  color: this.$mainColor,
                  unit: "",
                },
              });
            }
          },
        },

        {
          title: "变更时间",
          key: "createTime",
          width: 200,
        },
        {
          title: "业务类型",
          key: "detail",
          // width: 200,
          render: (h, params) => {
            let showText = "";
            if (params.row.serviceType) {
              showText = getDictByKey(
                "depositServiceType",
                params.row.serviceType
              );
            }
            return h("div", [h("span", {}, showText)]);
          },
        },
        {
          title: "详细",
          key: "detail",
          minWidth: 300,
          tooltip: true,
        },
      ],
    };
  },
  methods: {
    showDictData(record) {
      this.$refs.dictdataModal.show(record);
    },
  },
  mounted() {},
};
</script>
